<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Uniarte</title>

        <!-- Bootstrap -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/uniarte-theme.css" rel="stylesheet">
        <link href="css/bootstrap.icon-large.css" rel="stylesheet">
        <link href="css/default.css" rel="stylesheet">
        <link href="css/uniarte-icons.css" rel="stylesheet">
        
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <nav class="navbar navbar-fixed-top navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><img src="img/logo.png" alt="Uniarte"> Uniarte</a>
                </div>
                <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Inicio</a></li>
                        <li><a href="#">Bio</a></li>
                        <li><a href="#">Proyectos</a></li>
                        <li><a href="#">Contáctanos</a></li>
                    </ul>
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Buscar">
                        </div>
                        <button type="submit" class="btn btn-default">Buscar</button>
                    </form>
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="http://www.facebook.com/" target="_blank">
                                <span class="icon-large icon-facebook"></span>
                            </a>
                        </li>
                        <li>
                            <a href="http://www.twitter.com/" target="_blank">
                                <span class="icon-large icon-twitter"></span>
                            </a>
                        </li>
                        <li>
                            <a href="http://plus.google.com/" target="_blank">
                                <span class="icon-large icon-google-plus"></span>
                            </a>
                        </li>
                        <li>
                            <a href="http://pe.linkedin.com/" target="_blank">
                                <span class="icon-large icon-linked-in"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="img/proyectos/Proyecto1/1.jpg" alt="Proyecto 1">
                    <div class="carousel-caption">
                        <h3>Proyecto 1</h3>
                    </div>
                </div>
                <div class="item">
                    <img src="img/proyectos/Proyecto2/2.jpg" alt="Proyecto 2">
                    <div class="carousel-caption">
                        <h3>Proyecto 2</h3>
                    </div>
                </div>
                <div class="item">
                    <img src="img/proyectos/Proyecto3/3.jpg" alt="Proyecto 3">
                    <div class="carousel-caption">
                        <h3>Proyecto 3</h3>
                    </div>
                </div>
                <div class="item">
                    <img src="img/proyectos/Proyecto4/4.jpg" alt="Proyecto 4">
                    <div class="carousel-caption">
                        <h3>Proyecto 4</h3>
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
        <div class="container-fluid">
            <div class="col-md-8"> 
                <h3>Proyecto 1</h3>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquet neque sed pulvinar euismod. Duis ipsum purus, venenatis vitae turpis a, consectetur bibendum dolor. Suspendisse ultricies pretium nisl vel sagittis. Mauris venenatis nulla at purus congue, at laoreet erat dictum. Fusce varius viverra neque, feugiat feugiat justo iaculis non. Suspendisse vel tempor augue. Ut ac gravida purus. Aenean sed erat pharetra neque luctus faucibus in et eros. Nunc feugiat lobortis condimentum. Duis ullamcorper turpis sapien, a interdum diam eleifend nec.</p>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquet neque sed pulvinar euismod. Duis ipsum purus, venenatis vitae turpis a, consectetur bibendum dolor. Suspendisse ultricies pretium nisl vel sagittis. Mauris venenatis nulla at purus congue, at laoreet erat dictum. Fusce varius viverra neque, feugiat feugiat justo iaculis non. Suspendisse vel tempor augue. Ut ac gravida purus. Aenean sed erat pharetra neque luctus faucibus in et eros. Nunc feugiat lobortis condimentum. Duis ullamcorper turpis sapien, a interdum diam eleifend nec.</p>
                <blockquote class="blockquote-reverse">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                </blockquote>   
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquet neque sed pulvinar euismod. Duis ipsum purus, venenatis vitae turpis a, consectetur bibendum dolor. Suspendisse ultricies pretium nisl vel sagittis. Mauris venenatis nulla at purus congue, at laoreet erat dictum. Fusce varius viverra neque, feugiat feugiat justo iaculis non. Suspendisse vel tempor augue. Ut ac gravida purus. Aenean sed erat pharetra neque luctus faucibus in et eros. Nunc feugiat lobortis condimentum. Duis ullamcorper turpis sapien, a interdum diam eleifend nec.</p>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquet neque sed pulvinar euismod. Duis ipsum purus, venenatis vitae turpis a, consectetur bibendum dolor. Suspendisse ultricies pretium nisl vel sagittis. Mauris venenatis nulla at purus congue, at laoreet erat dictum. Fusce varius viverra neque, feugiat feugiat justo iaculis non. Suspendisse vel tempor augue. Ut ac gravida purus. Aenean sed erat pharetra neque luctus faucibus in et eros. Nunc feugiat lobortis condimentum. Duis ullamcorper turpis sapien, a interdum diam eleifend nec.</p>
                <address>
                    <strong>Twitter, Inc.</strong><br>
                    795 Folsom Ave, Suite 600<br>
                    San Francisco, CA 94107<br>
                    <abbr title="Phone">P:</abbr> (123) 456-7890
                </address>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <img class="img-rounded" src="img/proyectos/Proyecto1/p11.JPG" alt="Imágenes Proyecto 1" />
                    <div class="caption">
                        <h3>Imágenes</h3>
                        <p>Galería de Imágenes del proyecto</p>
                        <p><a href="#" class="btn btn-primary" role="button">Ver</a></p>
                    </div>
                </div>
                <div class="thumbnail">
                   <div class="caption">
                        <dl class="dl-horizontal">
                            <dt>Fecha</dt><dd>5 de Junio 2012</dd>
                            <dt>Lugar</dt><dd>Trujillo, Perú</dd>
                            <dt>Tiempo de realización</dt><dd>1 año y 2 meses</dd>
                        </dl>
                        <h3>Detalles</h3>
                        <p>Detalles del proyecto</p>
                        <p><a href="#" class="btn btn-primary" role="button">Ver</a></p>
                    </div>
                </div>
            </div>
        </div> 
        <footer id="footer">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <h4>Encuéntranos en la Web</h4>
                        <ul class="list-unstyled">
                            <li>
                                <a href="http://www.facebook.com/" target="_blank">
                                    <span class="uniarte-icon-social-facebook uniarte-icon"></span>
                                    <small>Facebook</small>
                                </a>
                            </li>
                            <li>
                                <a href="http://www.twitter.com/" target="_blank">
                                    <span class="uniarte-icon-social-twitter uniarte-icon"></span>
                                    <small>Twitter</small>
                                </a>
                            </li>
                            <li>
                                <a href="http://www.plus.google.com/" target="_blank">
                                    <span class="uniarte-icon-social-google-plus"></span>
                                    <small>Google Plus</small>
                                </a>
                            </li>
                            <li>
                                <a href="http://www.plus.google.com/" target="_blank">
                                    <span class="uniarte-icon-social-linkedin"></span>
                                    <small>LinkedIn</small>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <h4>Visita</h4>
                        <ul class="list-unstyled">
                            <li><a href="http://www.google.com.pe">Link 1</a></li>
                            <li><a href="http://www.google.com.pe">Link 2</a></li>
                            <li><a href="http://www.google.com.pe">Link 3</a></li>
                            <li><a href="http://www.google.com.pe">Link 4</a></li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <h4>Columna 3</h4>
                        <ul class="list-unstyled">
                            <li><a href="http://www.google.com.pe">Fila 1</a></li>
                            <li><a href="http://www.google.com.pe">Fila 2</a></li>
                            <li><a href="http://www.google.com.pe">Fila 3</a></li>
                            <li><a href="http://www.google.com.pe">Fila 4</a></li>
                        </ul>
                    </div>
                </div>
                <hr>
                <div class="container-fluid text-center">
                    <p class="small">
                        © Uniarte 2014 - Todos los derechos reservados
                    </p>
                </div>
            </div>
        </footer>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.js"></script>
    </body>
</html>